<template>
       <div class="app1">
        <h4>父组件1</h4>
        <h4>房产：{{ house }}</h4>
        <button @click="changToy">修改Child1的玩具</button>
        <button @click="changComputer">修改Child2的电脑</button>
        <button @click="getAllChild($refs)">所有子组件的书变多</button>
        <!-- 组件标签里的ref是标识 -->
        <Child1 ref="c1"/>
        <Child2 ref="c2"/>
       </div>
</template>
    
<script setup lang='ts'>
import { ref } from 'vue';
import Child1 from './Child1.vue';
import Child2 from './Child2.vue';

let c1 = ref()
let c2 = ref()

let house = ref(4)

function changToy() {
    c1.value.toy = '迪迦'
}
function changComputer() {
    c2.value.computer = '华为'
}
function getAllChild(refs:{[key:string]:any}) {
    // console.log(refs);
    for (const key in refs) {
    //    console.log(refs[key]);
       refs[key].computer  += 2
    }
}

// 把数据交给外部
defineExpose({house})
</script>
    
<style scoped>
    .app1{
        width: 80%;
        padding: 20px;
        background-color: bisque;
        font-size: 17px;
        border-radius: 5px;
    }
</style>